<template>
    <div class="login">
         <!-- 登录表单，动态属性放前面 -->
        <div class="login-container">
            <h1>系统登录</h1>
            <el-form 
            :model="loginForm" 
            :rules="rules" 
            status-icon
            ref="loginForm" 
            class="ruleForm">

             <!-- 表单验证 step 02: el-form 指定ruls属性，设置验证规则 -->
                <!-- <span class="iconfont icon-mima"></span> -->
                <!-- 表单验证 step 01: 指定prop 属性 
                   status-icon 表单验证的 状态图标
                -->
                <el-form-item prop="account">
                    <el-input prefix-icon="iconfont icon-zhanghao" type="text" 
                    v-model="loginForm.account"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input 
                        prefix-icon="iconfont icon-mima" 
                        :suffix-icon="close == true?'iconfont icon-yanjing' :'iconfont icon-yanjing1'"
                        :type="close == true ?'text':'password'" 
                        v-model="loginForm.password" 
                        @click.native="changeType">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click.prevent="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
<!-- {{loginForm}} -->
    </div>
</template>

<script>
    //2.1 导入api接口函数
    import {checkLogin} from '@/api/account';
    import storage from "@/utils/local"
    import {createRoutes} from '@/router/index'; //导入计算路由的方法

    export default {
        data(){
            return {
                loginForm:{
                    account:"",
                    password:""
                }, //表单中的数据对象
                rules:{
                    //如果只有一个验证规则，用对象
                    account:[
                        { required: true, message: "请输入账号", trigger: "blur" }
                    ],
                    password:[
                        //多个规则，用数组
                        { required: true, message: "请输入密码", trigger: "blur" },
                        { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
                    ]
                }, //表单验证 step 03:验证规则
                close:false //默认是否显示密码
            }
        },
        methods:{
            submitForm(){
                // console.log(msg)
                //1.检测表单是否通过验证
               this.$refs.loginForm.validate(async(valid)=>{
                    // console.log(valid)
                    // 2.表单验证通过，发请求
                    // 2.2 调用接口函数
                    // 2.3 验证通过，发请求
                   if(valid==true){
                        let data = {
                            account:this.loginForm.account,
                            password:this.loginForm.password
                        }
                        /* let ret = checkLogin(data);
                        console.log(ret)
                        ret.then(res=>{
                            console.log(res)
                        }) */
                        //处理异常
                        try {
                            let ret = await checkLogin(data);
                            console.log(ret)
                            //提示消息
                           /*  this.$message({
                                message:ret.msg,
                                type:ret.code == 0 ? "success" :"warning"
                            }) */

                            if(ret.code==0){
                                // console.log(666666)
                                //登录成功，保存token,好下次使用
                                storage.set("t_k",ret.token)

                                //保存用户角色
                                storage.set("role",ret.role)

                                //计算用户的路由
                                createRoutes();

                                //跳转 首页
                                // this.$router.push("/home")
                                this.$router.push("/")
                            }
                        } catch (error) {
                            console.log(error)
                            // this.$message({
                            //     type:"error",
                            //     message:error.message
                            // })
                        }
                       
                   }
               });
            },
            changeType(e){
                this.close = true;
                var curr = e.target;//点击的对象
                // console.log(curr.className)
                //是隐藏的，就显示
                if(curr.className.includes("icon-yanjing1")){
                    this.close = true;
                }else{
                    this.close = false;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.login{
    background:url('../assets/img/bg.png');
    background-size: cover;
    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

    .login-container{
        width: 450px;
        // background: orange;
        h1{
            text-align: center;
            padding: 20px 0;
            font-size: 22px;
            color:#ffffff;
        }
        
        // element 每个组件有一个跟组件名称相同的class选择器
        //在覆盖样式的时候，一层层的找
        //如果覆盖不了，用 /deep/+选择器 穿透样式
        //eg: /deep/.el-form{}
        .el-form{
            .el-form-item{
                .el-button--primary{
                    width: 100%;
                }
            }
        }
       
    }
}
</style>